<template>
  <div class="page-box">
    <div>
      <nut-row class="top-group" type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <nut-radiogroup v-model="sel_group">
            <nut-radio label="0">{{ $t('OrderPageBak.jxz') }}</nut-radio>
            <nut-radio label="2">{{ $t('OrderPageBak.shz') }}</nut-radio>
            <nut-radio label="3">{{ $t('OrderPageBak.ywc') }}</nut-radio>
            <nut-radio label="-1">{{ $t('OrderPageBak.ysb') }}</nut-radio>
          </nut-radiogroup>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <nut-infiniteloading
            @loadmore="onInfinite"
            :is-show-mod="true"
            :has-more="isHasMore"
            :is-loading="isLoading"
            :threshold="200"
          >
            <ul>
              <li v-for="(item, index) in data" :key="item.id" class="slip-main">
                <ul v-if="item.task_proto.type < 5" class="task-list">
                  <li class="task-title">{{item.task_proto.title}}</li>
                  <li>{{ $t('OrderPageBak.rwyq') }}: {{item.task_proto.desc}}</li>
                  <li v-if="item.task_proto.url">{{ $t('OrderPageBak.rwlj') }}: <a target="_blank" :href="item.task_proto.url">{{ $t('OrderPageBak.cklj') }}</a></li>
                  <span class="money">💰{{item.task_proto.single_reward}}</span>
                  <li>{{ $t('OrderPageBak.sj') }}: {{item.created_at}}</li>
                  <li style="margin:0;">
                    <nut-button
                      type="dashed"
                      shape="circle"
                      small
                      @click="handleClickAdd(item)"
                      v-if="item.status == 0 || item.status == 1"
                    >
                      {{ $t('OrderPageBak.tjzy') }}
                    </nut-button>
                    <nut-button
                      type="dashed"
                      shape="circle"
                      small
                      @click="handleClickViewHis(item)"
                      v-if="item.status > 0"
                    >
                      {{ $t('OrderPageBak.ckzy') }}
                    </nut-button>
                    <span class="progress_tips" v-if="item.status == 1">{{ $t('OrderPageBak.ytj') }}({{ $t('OrderPageBak.ddtj') }})</span>
                    <span class="progress_tips" v-if="item.status == 2">{{ $t('OrderPageBak.ddsh') }}~</span>
                    <span class="progress_tips" style="color:#000;text-shadow: 0 0 0.2rem yellow;" v-if="item.status == 3">$t('OrderPageBak.rwwc')👌</span>
                    <span class="progress_tips" v-if="item.status == -1">{{ $t('OrderPageBak.jj') }}:{{item.reply}}</span>
                  </li>
                  <li class="task-item-bottom">
                    <ul>
                      <li v-show="item.status == 0 || item.status == 1"@click="handleClickConfirm(item)">{{ $t('OrderPageBak.tj') }}</li>
                      <li @click="handleClickThrow(item)">
                        <span v-if="item.status == 0 || item.status == 1">{{ $t('OrderPageBak.fq') }}</span>
                        <span v-else>{{ $t('OrderPageBak.sc') }}</span>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul v-else-if="item.task_proto.type == 5" class="task-list">
                  <li class="task-title">{{item.task_proto.title}}</li>
                  <li>{{ $t('OrderPageBak.rwyq') }}: <span @click="handleClickViewDesc(item.task_proto.desc)" class="view-desc">👀{{ $t('OrderPageBak.ck') }}</span></li>
                  <li v-if="item.task_proto.url">{{ $t('OrderPageBak.rwlj') }}: <a target="_blank" :href="item.task_proto.url">{{ $t('OrderPageBak.cklj') }}</a></li>
                  <span class="money">💰{{item.task_proto.single_reward}}</span>
                  <li>{{ $t('OrderPageBak.sj') }}: {{item.created_at}}</li>
                  <li style="margin: 0.5rem 0;">
                    <nut-button
                      type="dashed"
                      shape="circle"
                      small
                      @click="handleClickAdd(item)"
                      v-if="item.status == 0 || item.status == 1"
                    >
                      {{ $t('OrderPageBak.tjzy') }}
                    </nut-button>
                    <nut-button
                      type="dashed"
                      shape="circle"
                      small
                      @click="handleClickViewHis(item)"
                      v-if="item.status > 0"
                    >
                      {{ $t('OrderPageBak.ckzy') }}
                    </nut-button>
                    <span class="progress_tips" v-if="item.status == 1">{{ $t('OrderPageBak.ytj') }}({{ $t('OrderPageBak.ddtj') }})</span>
                    <span class="progress_tips" v-if="item.status == 2">{{ $t('OrderPageBak.ddsh') }}~</span>
                    <span class="progress_tips" style="color:#000;text-shadow: 0 0 0.2rem yellow;" v-if="item.status == 3">$t('OrderPageBak.rwwc')👌</span>
                    <span class="progress_tips" v-if="item.status == -1">{{ $t('OrderPageBak.jj') }}:{{item.reply}}</span>
                  </li>
                  <li class="task-item-bottom">
                    <ul>
                      <li v-show="item.status < 2"@click="handleClickConfirm(item)">{{ $t('OrderPageBak.tj') }}</li>
                      <li @click="handleClickThrow(item)">
                        <span v-if="item.status < 2">{{ $t('OrderPageBak.fq') }}</span>
                        <span v-else>{{ $t('OrderPageBak.sc') }}</span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </nut-infiniteloading>
        </nut-col>
      </nut-row>
      <nut-popup :overlay="false" close-icon="cross" close-icon-position="top-right" closeable position="bottom" v-model="showDialog">
        <div class="input-box">
          <div>
            <nut-textbox @inputFunc="inputContent" :switchMax="true" :maxNum="100"></nut-textbox>
          </div>
          <div style="margin:0.7rem 0;text-align: left;">
            <nut-imagepicker
              @imgMsg="uploadImgs"
              :width="60"
              :height="60"
              :max="3"
              :img-list.sync="imgList"
            >
            </nut-imagepicker>
          </div>
          <div>
            <nut-button
              small
              @click="handleClickSaveContent"
            >
              {{ $t('OrderPageBak.bc') }}
            </nut-button>
          </div>
        </div>
      </nut-popup>
      <nut-popup style="height:90%;" :overlay="false"  position="bottom" closeable close-icon="cross" v-model="showReviewDescDialog">
        <div style="text-align: left;padding:1rem;" v-html="review_desc">

        </div>
      </nut-popup>
      <nut-popup :overlay="false" close-icon="cross" close-icon-position="top-right" closeable position="bottom" v-model="showDialogHis">
        <div class="input-box">
          <div>
            <p style="text-align: left;">{{content_his}}</p>
          </div>
          <div v-if="img_arr.length>0" style="text-align: left;">
            <img class="img-history" v-for="item in img_arr" :src="$api_url.server+item" alt="">
          </div>
        </div>
      </nut-popup>
    </div>
    <MainNav nav_index="3" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";

export default {
  name: 'OrderPage',
    components: {MainNav},
    data () {
        return {
            sel_group:'0',
            data: new Array(30),
            page: 0,
            num: 2,
            isHasMore: false,
            isLoading: false,
            isErr: false,
            timer: null,
            data:'',
            curr_item: '',
            showDialog: false,
            showDialogHis: false,
            imgList: [],
            content:'',
            content_his:'',
            img_arr:[],
            showReviewDescDialog: false,
            review_desc:'',
        }
    },
    methods:{
        inputContent(val){
            this.content = val;
        },
        shiftTab(index){

        },
        onInfinite () {
            if(this.isHasMore && !this.isLoading){
                this.page += 1;
                this.getData();
            }
        },
        initPage(){
            this.page = 0;
            this.isHasMore = true;
            this.data = [];
        },
        handleClickViewDesc(html){
            this.review_desc = html;
            this.showReviewDescDialog = true;
        },
        handleClickViewHis(item){
            this.content_his = item.content;
            if(item.imgs){
                this.img_arr = item.imgs.split(",");
            } else{
                this.img_arr = [];
            }
            this.showDialogHis = true;
        },
        handleClickAdd(item){
            this.curr_item = item;
            this.content_his = item.content;
            if(item.imgs){
                this.img_arr = item.imgs.split(",");
            } else{
                this.img_arr = [];
            }
            this.showDialog = true;

        },
        uploadImgs(){

        },
        getData(){
            this.isLoading = true;
            this.$axios.get(this.$api_url.order_list+"?status="+this.sel_group+"&page="+this.page).then((res)=>{
                if(this.data.length == 0){
                    this.data = res.data;
                } else{
                    this.data = this.data.concat(res.data);
                }
                if (res.data.length == 0) {
                    this.isHasMore = false;
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.isLoading = false;
            })
        },
        handleClickConfirm(item){
            let loading = this.$toast.loading();
            let id = item.id;
            this.$axios.post(this.$api_url.confirm_order_content,this.$qs.stringify({
                id: id
            })).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                    this.$forceUpdate();
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        handleClickThrow(item){
            let loading = this.$toast.loading();
            let id = item.id;
            this.$axios.post(this.$api_url.throw_order,this.$qs.stringify({
                id: id
            })).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        handleClickSaveContent(){
            this.showDialog = false;
            if(!this.curr_item){
                return;
            }
            if(this.content || this.imgList.length > 0){
                let loading = this.$toast.loading();
                let param = new FormData();
                param.append("id",this.curr_item.id);
                param.append("content",this.content);
                let imgArr = [];
                for(let i = 0; i < this.imgList.length; i++){
                    imgArr.push(this.imgList[i].src);
                }
                param.append("imgs",imgArr.join("<<XXOOXX>>"));
                this.$axios.post(this.$api_url.save_order_content,param).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    loading.hide()
                })
            }
        }
    },
    mounted() {
        this.getData();
    },
    watch:{
        sel_group(val){
            this.initPage();
            this.getData();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-box{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .top-group{
    position: fixed;
    top:0;
    width:100%;
    height:2rem;
    padding-top:1rem;
    background-color: #fff;
    z-index: 100;
    border-bottom:thin solid #ddd;
  }
  .task-list{
    text-align: left;
  }
  .bottom-tips{
    height:3rem;
    line-height:3rem;
  }
  .input-box{
    padding:3rem 1rem 2rem 0.6rem;
  }
  .img-history{
    margin-right:0.3rem;
    margin-bottom:0.3rem;
    border:thin dashed #ccc;
    padding:0.3rem;
    max-width: 12rem;
    max-height:12rem;
  }
  .progress_tips{
    color:#777;
    position: relative;
    top:0.2rem;
    left:0.3rem;
  }
  .slip-main{
    border-bottom:none;
    margin:0.3rem 0;
    border-radius: 0.2rem;
    padding:0;
  }
  .task-list{
    width:100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.2rem;
    position: relative;
  }
  .task-list li{
    padding: 0.2rem 0.5rem;
  }
  .task-list .task-title{
    padding:0.4rem;
    background: linear-gradient(to right, red,orange);
    color:#fff;
  }
  .task-item-bottom{
    background-color: transparent;
    color: #555;
  }
  .task-item-bottom ul{
    overflow: hidden;
  }
  .task-item-bottom ul li{
    width: 50%;
    text-align: center;
    float: left;
    box-sizing: border-box;
    padding: 0.3rem 0;
    border-right: thin solid #eaeaea;
  }
  .task-item-bottom ul li:last-child{
    border-right:none;
  }
  .money{
    color: orange;
    font-size: 1.2rem;
    position: absolute;
    top: 2rem;
    right: 1rem;
    font-weight: bold;
  }
  .view-desc{
    padding: 0.1rem 0.2rem;
    border-radius: 0.3rem;
    cursor: pointer;
    color: orange;
  }
</style>
